import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons';
import { Menu } from 'antd';
import { Carousel } from 'antd';
import React, { useState,useRef } from 'react';
const contentStyle = {
    height: '160px',
    color: '#fff',
    lineHeight: '160px',
    textAlign: 'center',
    background: '#364d79',
};
const items = [
    {
        label: 'Navigation One',
        key: 'mail',
        icon: <MailOutlined />,
    },
    {
        label: 'Navigation Two',
        key: 'app',
        icon: <AppstoreOutlined />,
        disabled: true,
    },
    {
        label: 'thred',
        key: 'SubMenu',
        icon: <SettingOutlined />,
        children: [
            {
                type: 'group',
                label: '第一项',
                children: [
                    {
                        label: '第一项子项 1',
                        key: 'setting:1',
                    },
                    {
                        label: 'Option 2',
                        key: 'setting:2',
                    },
                ],
            },
            {
                type: 'group',
                label: '第二想',
                children: [
                    {
                        label: 'Option 3',
                        key: 'setting:3',
                    },
                    {
                        label: 'Option 4',
                        key: 'setting:4',
                    },
                ],
            },
        ],
    },
    {
        label: "four",
        key: 'alipay',
        children: [
            {
                type: 'group',
                label: '第一项',
                children: [
                    {
                        label: '第一项子项 1',
                        key: 'setting:1',
                    },
                    {
                        label: 'Option 2',
                        key: 'setting:2',
                    },
                ],
            },
            {
                type: 'group',
                label: '第二想',
                children: [
                    {
                        label: 'Option 3',
                        key: 'setting:3',
                    },
                    {
                        label: 'Option 4',
                        key: 'setting:4',
                    },
                ],
            },
        ],
    },
    {
        label: "中英文切换",
        key: 'alipaasd',
        children: [
            {
                type: 'group',
                label: '中文',
                children: [
                    {
                        label: '中文',
                        key: 'setting:1',
                    }
                ],
            },
            {
                type: 'group',
                label: '英文',
                children: [
                    {
                        label: '英文',
                        key: 'setting:2',
                    }
                ],
            },
        ],

    },
];
const items1 = [
    {
        label: '第一项',
        key: 'mail',
        icon: <MailOutlined />,
    },
    {
        label: '第二项',
        key: 'app',
        icon: <AppstoreOutlined />,
        disabled: true,
    },
    {
        label: '第三项',
        key: 'SubMenu',
        icon: <SettingOutlined />,
        children: [
            {
                type: 'group',
                label: '第一项',
                children: [
                    {
                        label: '第一项子项 1',
                        key: 'setting:1',
                    },
                    {
                        label: 'Option 2',
                        key: 'setting:2',
                    },
                ],
            },
            {
                type: 'group',
                label: '第二想',
                children: [
                    {
                        label: 'Option 3',
                        key: 'setting:3',
                    },
                    {
                        label: 'Option 4',
                        key: 'setting:4',
                    },
                ],
            },
        ],
    },
    {
        label: "第四项",
        key: 'alipay',
        children: [
            {
                type: 'group',
                label: '第一项',
                children: [
                    {
                        label: '第一项子项 1',
                        key: 'setting:1',
                    },
                    {
                        label: 'Option 2',
                        key: 'setting:2',
                    },
                ],
            },
            {
                type: 'group',
                label: '第二想',
                children: [
                    {
                        label: 'Option 3',
                        key: 'setting:3',
                    },
                    {
                        label: 'Option 4',
                        key: 'setting:4',
                    },
                ],
            },
        ],
    },
    {
        label: "中英文切换",
        key: 'alipaasd',
        children: [
            {
                type: 'group',
                label: '中文',
                children: [
                    {
                        label: '中文',
                        key: 'setting:1',
                    }
                ],
            },
            {
                type: 'group',
                label: '英文',
                children: [
                    {
                        label: '英文',
                        key: 'setting:2',
                    }
                ],
            },
        ],

    },
];

const App = () => {
    const myref = useRef(null)
    const [current, setCurrent] = useState('mail');
    const [flag, setFlag] = useState(true)

    const onClick = (e) => {
        console.log('click ', e);
        setCurrent(e.key);
        if (e.key === 'setting:1') {
            setFlag(false)
        }
        else if (e.key === 'setting:2') {
            setFlag(true)
        }
    };
    const onChange = (currentSlide) => {
        console.log(currentSlide);
    };
   const prevfn = ()=>{
       console.log(myref.current);
       myref.current.prev()
   }
   const nextfn = ()=>{
    myref.current.next()
   }

    return <>
        <Menu onClick={onClick} selectedKeys={[current]} mode="horizontal" items={flag ? items : items1} />;
        <div style={{ position: "relative" }}>
            <Carousel afterChange={onChange} ref={myref}>
                <div>
                    <h3 style={contentStyle}>1</h3>
                </div>
                <div>
                    <h3 style={contentStyle}>2</h3>
                </div>
                <div>
                    <h3 style={contentStyle}>3</h3>
                </div>
                <div>
                    <h3 style={contentStyle}>4</h3>
                </div>
            </Carousel>
            <div style={{
                position: 'absolute',
                top: '55px',
                zIndex: '99'
            }} onClick={()=>prevfn()}> 《 </div>
            <div style={{
                position: 'absolute',
                top: '55px',
                zIndex: '99',
                right: "0"
            }} onClick={()=>nextfn()}> 》 </div>
        </div>

    </>

};

export default App;